<template>
	<view class="my-publish">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :collection="collection"
			orderby="publish_date desc" @load="handleLoad">
			<view v-if="error">{{ error.errMsg }}</view>
			<view v-if="loading">
				<u-skeleton rows="27" title loading>
				</u-skeleton>
			</view>
			<view v-if="data.length">
				<uni-list>
					<uni-list-item v-for="(item,index) in data" :key="index"
						:title="item?.article_id[0]?.title.slice(0,15)" :note="item?.article_id[0]?.description.slice(0,20)"
						@click="handleItemClick(item?.article_id[0])" clickable>
						<template #footer>
							<text class="iconfont icon-dianzan" style="color: #e86262;"
								@click.stop="cancellike(item)"></text>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view v-else>
				<view class="none">
					<image src="../../static/images/nodata.png" mode="aspectFit" ></image>
				</view>
			</view>
		</unicloud-db>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	const udb = ref()

	const db = uniCloud.database()

	const collection = [
		db.collection('blog-like').where('user_id == $cloudEnv_uid').getTemp(),
		db.collection('blog').field('_id,title,description').getTemp()
	]

	const handleLoad = (data) => {
		console.log(data);
	}

	const handleItemClick = (item) => {
		uni.navigateTo({
			url: `../../pages/detail/detail?id=${item._id}`
		})
	}

	const cancellike = (item) => {
		udb.value?.remove(item._id, {
			confirmContent: '是否要取消点赞?',
			success: (res) => {
				console.log(res);
			}
		})
	}
</script>

<style scoped lang="scss">
	.my-publish {
		.iconfont {
			font-size: 45rpx;
			padding: 0 10rpx;
		}
		
		.none {
			display: flex;
			image {
				margin: auto;
			}
		}
	}
</style>